<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子溢出、定位、浮动示例</title>
    <link rel="stylesheet" href="css_five.css">
</head>
<body>
    <div class="overflow_1">
        垂直方向：<br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
    </div>
    <div class="overflow_2">OVERFLOW</div>

    <div class="box pos_static">静态定位，也就是默认文档流定位方式</div>

    <div class="box pos_relative">相对定位，占用文档流</div>
    <div class="box">另外一个盒子</div>

    <div class="box pos_fixed">固定定位，不占用文档流</div>
    <div class="box">另一个盒子</div>

    <div class="box pos_absolute">绝对定位，不占用文档流</div>
    <div class="box">另外一个盒子</div>

    <div style="position: relative;">
        <div class="box menu">盒子1</div>
        <div class="box absolute_menu">绝对定位，相对于已定位的父容器</div>
        <div class="box">盒子2</div>
    </div>

    <div class="box pos_sticky">粘贴定位，相对定位与固定定位的混合</div>

    <div>
        <div class="box box_float">盒子1</div>
        <div class="box box_float">盒子2</div>
        <div class="box box_float">盒子3</div>
        <div class="box box_float">盒子4</div>
        <div class="box clf">盒子5,不浮动</div>
    </div>

    <ul>
        <li>1</li>
        <li>2</li>
    </ul>


    

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</body>
</html>